<?php $this->_extends('_layouts/user_layout'); ?>

<?php $this->_block('pageCss'); ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $css_url; ?>album.css" />
	<link href='<?php echo $plugin_url; ?>jquery-ui/css/jquery-ui-1.8.21.custom.css' rel='stylesheet' type='text/css' />
	<link href='<?php echo $css_url; ?>uploadgrabotherweb.css' rel='stylesheet' type='text/css' />
<?php $this->_endblock(); ?>

<?php $this->_block('pageJs'); ?>
	<script src="<?php echo $plugin_url; ?>jquery-ui/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
	<script src="<?php echo $js_url; ?>jquery.picportionresize.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.autozindextop.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.easing.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.masonry.js" type="text/javascript" ></script>
<?php $this->_endblock(); ?>



<?php $this->_block('title'); ?>
	上传相片
<?php $this->_endblock(); ?>



		
<?php $this->_block('contents'); ?>
<?php 
	$links = array();
	if(!empty($albums)){
		foreach($albums as $album){
			$link = array(
				'text' => $album['albumname'], 
				'href' => url('album/index', array('uid' => Util::infoEncryption($album['uid']), 'aid' => Util::infoEncryption($album['id'])))
			);
			if(isset($album['active']) && $album['active']) {
				$links['active'] = $link;
			}else{
				$links[] = $link;
			}
		}
	}
	$this->_element('categories', array(
		'links' => $links
	)); 
?>

<section class="content ">
	<article>
	    <script>
			function waterFall(obj, itemSelector)
			{
				if(obj.hasClass('masonry')){
					obj.masonry('reload');
				}else{
					obj.masonry({
						itemSelector: itemSelector,
						singleMode: true,
						resizeable: true,
						animate: true,
						isAnimated: true,
						animationOptions: {
							duration: 390,
							easing: 'linear',
							queue: false
						},
						isFitWidth: true
					}).addClass('masonry');
				}
			}
		</script>
		<div id="vtab">
		    <ul>
		        <li class="local" title="从本地上传相片"><a href="<?php echo url('album/uploadphotolocal'); ?>"><img src="<?php echo $img_url; ?>upload-img.png" /></a></li>
		        <li class="web selected" title="粘贴网址抓取图片"><a href="<?php echo url('album/uploadphotograb'); ?>"><img src="<?php echo $img_url; ?>earth-upload-icon.png" /></a></li>
		    </ul>
		    
		    <div class="item-tontent clearfix ff_sf_cr_op_box-shadow3">
				<article class="upload-grab-otherweb">
					<section class="left clearfix fleft">
						<h2>粘贴网址抓取图片</h2>
						<div class="border-line"></div>
						<p id="choose-album">
							选择相册：
							<select id="album-select" class="ff_sf_cr_op_box-shadow2 ff_sf_cr_op_border-radius">
								<?php if(empty($albums)): ?>
									<option value="__0__">没有相册</option>
								<?php else: ?>
									<?php foreach($albums as $album): ?>
										<option value="<?php echo Util::infoEncryption($album['id']); ?>"><?php echo $album['albumname']; ?></option>
									<?php endforeach; ?>
								<?php endif; ?>
							</select>
							
							或 
							<a title="创建相册">创建相册</a>
						</p>
						
						
						<div class="quality-setting">
							<div class="quality-setting-block fleft">
								<div id="photo-size-set" class="quality-set"></div>
							</div>
							<span class="fleft">预览缩放:</span>
							<span id="photo-size-text" class="fleft"></span>
							<span class="fleft">%</span>
						</div>
						<script>
							$(function(){
								$( "#photo-size-set" ).slider({ 
									min: 1,
									max: 100,
									step: 1,
									value: 30,
									create: function(){$('#photo-size-text').text('30');},
									slide: function(event, ui){
										$('#photo-container img').picPortionResize({
											width: 180 / 0.3 * ui.value / 100,
											maxHeight : 400,
											keepSmaller: false
										});
										waterFall($('#photo-container'), '.highlightit');
										$('#photo-size-text').text(ui.value);
									}
								});
							});
						</script>
						<div id="album-photos" class="clearfix fleft auto-zindex" dir="rtl">
							<span id="empty-photo-text">相册还是空的</span>
							<div class="loading-block" id="loading-block-photo">
								<img src="<?php echo $img_url; ?>loading.gif" />
							</div>
							<script>
								$('#empty-photo-text').hide();
								$('#loading-block-photo').hide();
							</script>
							
							<div id="photo-container" class="photo-container"></div>
						</div>
						<script>
							$('#album-photos').resizable({
								//animate: true,
								maxWidth: $('#album-photos').width(),
								//minWidth: $('#outer').width(),
								handles: 'se,e',
								start: function(event, ui){
									$('#album-photos').css('background-color', '#FDF7D7');
								},
								stop: function(event, ui){
									$('#album-photos').css('background-color', '#F7F7F2');
								},
								resize: function(event, ui){
									$('#album-photos').css('left', 0);
								}
							}).scroll(function(){
								$('.ui-resizable-handle').css('bottom', (1 - $('#album-photos').scrollTop())+'px' );
							});
						</script>
						<script>
							$(function() {
								$('.auto-zindex').autoZindexTop({cleanHandler: $('#vtab')});
								
							    $('#album-select').change(function(){
									var albumId = $(this).val();
									if(albumId != ''){
										$('#photo-container').html('');
										$('#empty-photo-text').fadeOut();
										$('#loading-block-photo').fadeIn();
										$.ajax({
											type: 'GET',
											url: '<?php echo url('album/getphotos'); ?>',
											data: {albumId: albumId},
											success: function(data){
												if(!data){
													$('#loading-block-photo').fadeOut(function(){
														$('#empty-photo-text').fadeIn();
													});
												}else{
													$.each(data, function(k, v){
														var newImg = new Image();
														$(newImg).addClass('photoimg').hide();
														$(newImg).load(function(){
															var a = $('<a class="highlightit mrb5" />');
															$(this).picPortionResize({
																width: 180,
																maxHeight : 400,
																keepSmaller: false
															});
															a.append($(this));
															//$('#photo-container').append(a);
															a.appendTo('#photo-container');
															$(this).fadeIn();
					
															waterFall($('#photo-container'), '.highlightit');										
														});
														$(newImg).bind('error', function(){
															$(this).attr('src', '<?php echo $img_url; ?>img_error.jpg');
														});
														if(v.type == 'local'){
															$(newImg).attr('src', '<?php echo $thumbnailphoto_url; ?>' + v.filename);
														}else{
															$(newImg).attr('src', v.filename);
														}
													});
													$('#loading-block-photo').fadeOut();
												}
											},
											dataType: 'json'
										});
									}
								}).change();
							});
						</script>
					</section>
					
					<div class="border-line-v fleft"></div>
				
					<section class="right clearfix fright">
						<div id="grab-form" class="clearfix">
							<input type="text" id="url-input" class="fleft" />
							<input type="button" class="button ff_sf_cr_op_text-shadow-green ff_sf_cr_op_border-radius2 fleft" id="url-btn" value="尝试抓取" />
						</div>
						
						
						<div class="quality-setting">
							<div class="quality-setting-block fleft">
								<div id="grab-size-set" class="quality-set"></div>
							</div>
							<span class="fleft">预览缩放:</span>
							<span id="grab-size-text" class="fleft"></span>
							<span class="fleft">%</span>
						</div>
						<script>
							$(function(){
								$('#uploading-transicon').hide();
								
								$( "#grab-size-set" ).slider({ 
									min: 1,
									max: 100,
									step: 1,
									value: 30,
									create: function(){$('#grab-size-text').text('30');},
									slide: function(event, ui){
										$('#grabedContainer img').picPortionResize({
											width: 180 / 0.3 * ui.value / 100,
											maxHeight : 400,
											keepSmaller: false
										});
										waterFall($('#grabedContainer'), 'img');
										$('#grab-size-text').text(ui.value);
									}
								});
							});
						</script>
						<div id="grab-photos" class="clearfix fleft auto-zindex">
							<span id="empty-grab-text">没有抓取到图片</span>
							<div class="loading-block" id="loading-block-grab">
								<img src="<?php echo $img_url; ?>loading.gif" />
							</div>
							<script>
								$('#empty-grab-text').hide();
								$('#loading-block-grab').hide();
							</script>
							
							<div id="grabedContainer" class="photo-container"></div>
						</div>
						
						<div class="fleft">
							<a id="select-all-grab" href="javascript::void(0);">全选</a><br />
							已选：<span id="select_num">0</span>/<span id="total_num">0</span><br />
							<script>
								$('#select-all-grab').click(function(){
									$('#grabedContainer img').addClass('selected');
									$('#select_num').text($('#grabedContainer img.selected').size());
								});
							</script>
							
							<input type="radio" id="save_onlylink" name="save-mode" value="save_onlylink" checked="checked" />
							<label for="save_onlylink">仅保存图片链接(图片不占用您的空间，但随着链接的失效，有可能会获取不到已保存的图片)</label><br />
							<input type="radio" id="save_real" name="save-mode" value="save_real" />
							<label for="save_real">下载实际图片并保存(图片将占用您的空间)</label>
						</div>
						<div class="clear"></div>
						<p class="error" id="save-grab-error"></p>
						<div class="clear"></div>
						<div id="add-form" class="fleft clearfix">
							<div class="quality-setting">
								<div class="quality-setting-block fleft">
									<div id="quality-set" class="quality-set"></div>
								</div>
								<span class="fleft">相片质量:</span>
								<span id="quality-text" class="fleft"></span>
								<span class="fleft">%</span><br />
							</div>
							<span class="fleft">(高质量的图片更加清晰，但也占用更高的存储空间)</span>
							<div class="clear"></div>
							<script>
								$( "#quality-set" ).slider({ 
									min: 30,
									max: 99,
									step: 1,
									value: 75,
									create: function(){$('#quality-text').text('75');},
									slide: function(event, ui){$('#quality-text').text(ui.value);}
								});
							</script>
							
							<div id="uploading-transicon" class="transparent">
								<img src="<?php echo $img_url; ?>loading-blue.gif" />
							</div>
							
							<input type="button" class="button ff_sf_cr_op_text-shadow-green ff_sf_cr_op_border-radius2 fleft" id="save-grab-btn" value="上传选择图片" />
							<input type="button" class="button ff_sf_cr_op_text-shadow-green ff_sf_cr_op_border-radius2 fleft" id="cancel-btn" value="取消选择" />
							<script>
								var uploadGrabAjax = function(upData)
								{
									var onceUpData = {
										albumId: upData.albumId,
										quality: upData.quality,
										saveMode: upData.saveMode
									};
									onceUpData.imgQueue = upData.imgQueue.splice(0, <?php echo ONCE_SAVEGRABPHOTO_NUM; ?>);
									$.ajax({
										type: 'POST',
										url: '<?php echo url('album/savegrabphotos'); ?>',
										data: onceUpData,
										success: function(data){
											if(data['result']){
												$('#empty-photo-text').fadeOut();
												
												$.each(data['detail'], function(k, v){
													var newImg = new Image();
													$(newImg).addClass('photoimg').hide();
													$(newImg).load(function(){
														var a = $('<a class="highlightit mrb5" />');
														$(this).picPortionResize({
															width: 180,
															maxHeight : 400,
															keepSmaller: false
														});
														a.append($(this));
														//$('#photo-container').append(a);
														a.prependTo('#photo-container');
														$(this).fadeIn();
														waterFall($('#photo-container'), '.highlightit');	
														$('img.'+v.mark).remove();
														$('#select_num').text($('#grabedContainer img.selected').size());
														$('#total_num').text($('#grabedContainer img').size());		
														waterFall($('#grabedContainer'), 'img');					
													});
													if(upData.saveMode == 'save_real'){
														$(newImg).attr('src', '<?php echo $thumbnailphoto_url; ?>' + v.fileName);
													}else{
														$(newImg).attr('src', v.fileName);
													}
												});
												waterFall($('#grabedContainer'), 'img');
												if(upData.imgQueue.length <= 0){	
													$('#uploading-transicon').fadeOut();
												}else{
													setTimeout(function(){uploadGrabAjax(upData);}, 1000);
												}
											}else{
												$('#save-grab-error').text(data.error);
												$('#uploading-transicon').fadeOut();
											}
										},
										dataType: 'json'
									});
								}
							
								$('#save-grab-btn').click(function(){
									$('#save-grab-error').text('');
									
									var albumId = $('#album-select').val();
									if(albumId == '__0__'){
										$('#save-grab-error').text('您还没有选择相册，是不是还没有登录');
									}else{
										if($('#grabedContainer img.selected').size() > 0){
											$('#uploading-transicon').fadeIn();
											
											var quality = $("#quality-set").slider('value');
											var saveMode = $('input[name="save-mode"]:checked').val();
											var imgQueue = new Array();
											$.each($('#grabedContainer img.selected'), function(k, v){
												k = 'img'+k;
												$(v).addClass(k);
												imgQueue.push({
													'src': $(v).attr('src'),
													'mark': k
												});
											});
											var upData = {
												albumId: albumId,
												quality: quality,
												saveMode: saveMode,
												imgQueue: imgQueue
											};
											uploadGrabAjax(upData);
										}else{
											$('#save-grab-error').text('您还没有选择上传哪些图片');
										}
									}
									
								});

							
								$('#cancel-btn').click(function(){
									$('#grabedContainer img').removeClass('selected');
									$('#select_num').text(0);
								});
							</script>
						</div>
						<script>
							$('#url-btn').click(function(){
								$('#grab-photos').scrollTop(0);
								$('#grabedContainer').html('');
								$('#empty-grab-text').fadeOut();
								$('#loading-block-grab').fadeIn();
								$.ajax({
									type: 'GET',
									url: '<?php echo url('album/graburlphoto'); ?>',
									data: {urltext: $('#url-input').val()},
									success: function(data){
										if(!data){
											$('#loading-block-grab').fadeOut(function(){
												$('#empty-grab-text').fadeIn();
											});
										}else{
											$('#total_num').data('num', 0).text(0);
											$.each(data, function(k, v){
												var newImg = new Image();
												$(newImg).hide();
												$(newImg).load(function(){
													$(this).picPortionResize({
														width: 180,
														maxHeight : 300,
														keepSmaller: false
													});
													$(this).appendTo('#grabedContainer');
													$(this).fadeIn();
							
													waterFall($('#grabedContainer'), 'img');
													$('#total_num').data('num', $('#total_num').data('num')*1+1).text($('#total_num').data('num'));									
												});
												$(newImg).attr('src', v);
											});
											$('#loading-block-grab').fadeOut();
										}
									},
									dataType: 'json'
								});
							});

							$('#grabedContainer img').live('click', function(event){
								event.stopPropagation();
								$(this).toggleClass("selected");
								$('#select_num').text($('#grabedContainer img.selected').size());
							});
						</script>
					</section>
				</article>
		    </div>
		</div>
	</article>
</section>
<?php $this->_endblock('contents'); ?>















